<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta charset="UTF-8">
    <title>选中个数统计</title>
	    <style>
	        .checkbox-group {
	            display: flex;
	            align-items: center;
	        }
	        .checkbox-group input {
	            margin-right: 10px;
	        }
	        .checkbox-group button {
	            margin-left: 10px;
	        }
	    </style>
	</head>
	<body>
		<div class="checkbox-group">
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1">选项1</label>
        <input type="checkbox" id="checkbox2">
        <label for="checkbox2">选项2</label>
        <input type="checkbox" id="checkbox3">
        <label for="checkbox3">选项3</label>
        <button id="countButton">测试选中的个数</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#countButton').click(function(){
                var count = $('input[type=checkbox]:checked').length;
                alert('选中的个数为: ' + count);
            });
        });
    </script>
	</body>
</html>
